<script setup lang="ts">

const dataList = ref([{
	mode: 'large',
	isTop:true,
	title: '2023年12月份销售',
	value: 10.26,
	colSpan: 18,
	valueUnit: '万元',
	icon: '',
	iconColor: '',
	titleStyle: { color: '#000000', fontSize: '15px', fontWeight: 600 },
	largeValueStyle: { color: '#02B7E6', fontWeight: 600 },
	smallValueStyle: { color: '#02B7E6', fontWeight: 600 }
},
{
	mode: 'small',
	isTop:true,
	title: '本月达成',
	value: 19.66,
	colSpan: 6,
	valueUnit: '%',
	unitStyle: { color: '#000000', fontSize: '10px', fontWeight: 600  },
	icon: '',
	iconColor: '',
	titleStyle: { color: '#888888', fontSize: '14px' },
	largeValueStyle: { color: '#000000', fontSize: '18px' },
	smallValueStyle: { color: '#000000', fontSize: '14px' }
},
{
	mode: 'small',
	isTop:false,
	title: '毛利额(元)',
	value: 6866.81,
	colSpan: 6,
	valueUnit: '',
	icon: '',
	iconColor: '',
	titleStyle: { color: '#888888', fontSize: '14px' },
	largeValueStyle: { color: '#000000', fontSize: '18px' },
	smallValueStyle: { color: '#000000', fontSize: '14px' }
},
{
	mode: 'small',
	isTop:false,
	title: '毛利率',
	value: 11.66,
	colSpan: 6,
	valueUnit: '%',
	unitStyle: { color: '#000000', fontSize: '10px', fontWeight: 600  },
	icon: '',
	iconColor: '',
	titleStyle: { color: '#888888', fontSize: '14px' },
	largeValueStyle: { color: '#000000', fontSize: '18px' },
	smallValueStyle: { color: '#000000', fontSize: '14px' }
},
{
	mode: 'small',
	isTop:false,
	title: '来客',
	value: 16866,
	colSpan: 6,
	valueUnit: '',
	icon: '',
	iconColor: '',
	titleStyle: { color: '#888888', fontSize: '14px' },
	largeValueStyle: { color: '#000000', fontSize: '18px' },
	smallValueStyle: { color: '#000000', fontSize: '14px' }
},
{
	mode: 'small',
	isTop:false,
	title: '销售增长',
	value: 568.66,
	colSpan: 6,
	valueUnit: '',
	icon: '',
	iconColor: '',
	titleStyle: { color: '#888888', fontSize: '14px' },
	largeValueStyle: { color: '#000000', fontSize: '18px' },
	smallValueStyle: { color: '#000000', fontSize: '14px' }
}
])

const dataList2 = ref([{
	mode: 'large',
	isTop:true,
	title: '期初库存余额(万元)',
	value: 36.89,
	colSpan: 12,
	valueUnit: '',
	icon: '',
	iconColor: '',
	titleStyle: { color: '#888888', fontSize: '14px' },
	largeValueStyle: { color: '#02B7E6', fontWeight: 600 },
	smallValueStyle: { color: '#02B7E6', fontWeight: 600 }
},
{
	mode: 'large',
	isTop:true,
	title: '期末库存余额(万元)',
	value: 36.89,
	colSpan: 12,
	valueUnit: '',
	icon: '',
	iconColor: '',
	titleStyle: { color: '#888888', fontSize: '14px' },
	largeValueStyle: { color: '#FF9400', fontWeight: 600 },
	smallValueStyle: { color: '#FF9400', fontWeight: 600 }
}
])

const dataList3 = ref([{
	mode: 'large',
	isTop:true,
	title: '本月用水(吨)',
	value: 3000,
	colSpan: 12,
	valueUnit: '',
	icon: '',
	iconColor: '',
	titleStyle: { color: '#888888', fontSize: '14px' },
	largeValueStyle: { color: '#02B7E6', fontWeight: 600 },
	smallValueStyle: { color: '#02B7E6', fontWeight: 600 }
},
{
	mode: 'large',
	isTop:true,
	title: '抄录完成度',
	value: 100,
	colSpan: 12,
	valueUnit: '%',
	icon: '',
	iconColor: '',
	titleStyle: { color: '#888888', fontSize: '14px' },
	largeValueStyle: { color: '#FF9400', fontWeight: 600 },
	smallValueStyle: { color: '#FF9400', fontWeight: 600 },
	unitStyle: { color: '#FF9400', fontWeight: 600 }
},
{
	mode: 'small',
	isTop:false,
	title: '同比',
	value: 95,
	colSpan: 12,
	valueUnit: '%',
	unitStyle: { color: '#000000', fontSize: '10px', fontWeight: 600  },
	icon: 'icon-shuju-shangsheng',
	iconColor: '#00AD60',
	iconSize:20,
	titleStyle: { color: '#888888', fontSize: '14px' },
	// largeValueStyle: { color: '#02B7E6', fontWeight: 600 },
	// smallValueStyle: { color: '#02B7E6', fontWeight: 600 }
},
{
	mode: 'small',
	isTop:false,
	title: '环比',
	value: 12,
	colSpan: 12,
	valueUnit: '%',
	unitStyle: { color: '#000000', fontSize: '10px', fontWeight: 600  },
	icon: 'icon-shuju-xiajiang',
	iconColor: '#FF4000',
	titleStyle: { color: '#888888', fontSize: '14px' },
	// largeValueStyle: { color: '#FF9400', fontWeight: 600 },
	// smallValueStyle: { color: '#FF9400', fontWeight: 600 },
	// unitStyle: { color: '#FF9400', fontWeight: 600 }
}
])


const dataList4= ref([{
	mode: 'large',
	isTop:true,
	title: '总账单应收',
	value: 888888,
	colSpan: 12,
	valueUnit: '',
	icon: '',
	iconColor: '',
	titleStyle: { color: '#ffffff', fontSize: '14px' },
	largeValueStyle: { color: '#ffffff', fontWeight: 600 },
	smallValueStyle: { color: '#ffffff', fontWeight: 600 }
},
{
	mode: 'large',
	isTop:true,
	title: '本月实收',
	value: 3332.23,
	colSpan: 12,
	valueUnit: '',
	icon: '',
	iconColor: '',
	titleStyle: { color: '#ffffff', fontSize: '14px' },
	largeValueStyle: { color: '#ffffff', fontWeight: 600 },
	smallValueStyle: { color: '#ffffff', fontWeight: 600 },
	// unitStyle: { color: '#ffffff', fontWeight: 600 }
},
{
	mode: 'small',
	isTop:false,
	title: '同比',
	value: 85,
	colSpan: 6,
	valueUnit: '%',
	unitStyle: { color: '#ffffff', fontSize: '10px', fontWeight: 600  },
	icon: 'icon-shuju-shangsheng',
	iconColor: '#00AD60',
	iconSize:20,
	titleStyle: { color: '#ffffff', fontSize: '14px' },
	largeValueStyle: { color: '#ffffff', fontWeight: 600 },
	smallValueStyle: { color: '#ffffff', fontWeight: 600 },
},
{
	mode: 'small',
	isTop:false,
	title: '本月',
	value: 590000,
	colSpan: 6,
	valueUnit: '',
	icon: '',
	iconColor: '',
	titleStyle: { color: '#ffffff', fontSize: '14px' },
	largeValueStyle: { color: '#ffffff', fontWeight: 600 },
	smallValueStyle: { color: '#ffffff', fontWeight: 600 },
	// unitStyle: { color: '#ffffff', fontWeight: 600 }
},
{
	mode: 'small',
	isTop:false,
	title: '同比',
	value: 12,
	colSpan: 6,
	valueUnit: '%',
	unitStyle: { color: '#ffffff', fontSize: '10px', fontWeight: 600  },
	icon: 'icon-shuju-xiajiang',
	iconColor: '#FF4000',
	titleStyle: { color: '#ffffff', fontSize: '14px' },
	largeValueStyle: { color: '#ffffff', fontWeight: 600 },
	smallValueStyle: { color: '#ffffff', fontWeight: 600 },
	// unitStyle: { color: '#FF9400', fontWeight: 600 }
},
{
	mode: 'small',
	isTop:false,
	title: '本月',
	value: 999999,
	colSpan: 6,
	valueUnit: '',
	icon: '',
	iconColor: '',
	titleStyle: { color: '#ffffff', fontSize: '14px' },
	largeValueStyle: { color: '#ffffff', fontWeight: 600 },
	smallValueStyle: { color: '#ffffff', fontWeight: 600 },
	// unitStyle: { color: '#ffffff', fontWeight: 600 }
},
])
const updateData=()=>{
	dataList.value = [{
	mode: 'large',
	isTop:true,
	title: '2023年12月份销售',
	value: 100.26,
	colSpan: 18,
	valueUnit: '万元',
	icon: '',
	iconColor: '',
	titleStyle: { color: '#000000', fontSize: '15px', fontWeight: 600 },
	largeValueStyle: { color: '#02B7E6', fontWeight: 600 },
	smallValueStyle: { color: '#02B7E6', fontWeight: 600 }
},
{
	mode: 'small',
	isTop:true,
	title: '本月达成',
	value: 59.66,
	colSpan: 6,
	valueUnit: '%',
	unitStyle: { color: '#000000', fontSize: '10px', fontWeight: 600  },
	icon: '',
	iconColor: '',
	titleStyle: { color: '#888888', fontSize: '14px' },
	largeValueStyle: { color: '#000000', fontSize: '18px' },
	smallValueStyle: { color: '#000000', fontSize: '14px' }
},
{
	mode: 'small',
	isTop:false,
	title: '毛利额(元)',
	value: 6866.81,
	colSpan: 6,
	valueUnit: '',
	icon: '',
	iconColor: '',
	titleStyle: { color: '#888888', fontSize: '14px' },
	largeValueStyle: { color: '#000000', fontSize: '18px' },
	smallValueStyle: { color: '#000000', fontSize: '14px' }
},
{
	mode: 'small',
	isTop:false,
	title: '毛利率',
	value: 11.66,
	colSpan: 6,
	valueUnit: '%',
	unitStyle: { color: '#000000', fontSize: '10px', fontWeight: 600  },
	icon: '',
	iconColor: '',
	titleStyle: { color: '#888888', fontSize: '14px' },
	largeValueStyle: { color: '#000000', fontSize: '18px' },
	smallValueStyle: { color: '#000000', fontSize: '14px' }
},
{
	mode: 'small',
	isTop:false,
	title: '来客',
	value: 16866,
	colSpan: 6,
	valueUnit: '',
	icon: '',
	iconColor: '',
	titleStyle: { color: '#888888', fontSize: '14px' },
	largeValueStyle: { color: '#000000', fontSize: '18px' },
	smallValueStyle: { color: '#000000', fontSize: '14px' }
},
{
	mode: 'small',
	isTop:false,
	title: '销售增长',
	value: 568.66,
	colSpan: 6,
	valueUnit: '',
	icon: '',
	iconColor: '',
	titleStyle: { color: '#888888', fontSize: '14px' },
	largeValueStyle: { color: '#000000', fontSize: '18px' },
	smallValueStyle: { color: '#000000', fontSize: '14px' }
}
]
console.log(dataList)
}
</script>

<route lang="json">{
	"style": {
		"navigationBarTitleText": "DataStatistics"
	}
}</route>

<template>
	<view class="main">
		<view style="margin-top: 25px;">
			<eui-data-statistics :dataList="dataList"></eui-data-statistics>
		</view>
		
		<view style="margin-top: 25px;">
			<eui-data-statistics :dataList="dataList2"></eui-data-statistics>
		</view>
		<eui-section title="图标大小自定义" type="line">
			<view style="margin-top: 25px;">
			<eui-data-statistics :dataList="dataList3"></eui-data-statistics>
		</view>
		</eui-section>
		

		<view style="margin-top: 25px;">
			<eui-data-statistics type="ViewReport" background="linear-gradient(135deg, #02B7E6 0%, #36A9F3 100%) #FFFFFF" :dataList="dataList4"></eui-data-statistics>
		</view>

		<view style="margin-top: 25px;">
			<eui-data-statistics type="ViewReport" background="linear-gradient(135deg, #FF8359 0%, #FF6430 100%), #FFFFFF" :dataList="dataList4"></eui-data-statistics>
		</view>
		<!-- <view @click="updateData">更新值</view> -->
	</view>


</template>

<style scoped lang="scss">
@import '../../../../static/font/enjoyicon5.0/iconfont.css';
.main {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: #888888;
}


.flex {
	display: flex;
}

.flexBox {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
}
.flex-item{
	margin-bottom: 36rpx; 
}
.flex-direction-row {
	flex-direction: row;
}

.flex-direction-column {
	flex-direction: column;
}

.justify-content-center {
	justify-content: center;
}

.justify-content-space-between {
	justify-content: space-between;
}

.justify-content-flex-start {
	justify-content: flex-start;
}

.justify-content-flex-end {
	justify-content: flex-end;
}

.align-items-center {
	align-items: center;
}

.align-items-flex-start {
	align-items: flex-start
}

.align-items-flex-end {
	align-items: flex-end
}

.align-items-baseline {
	align-items: baseline;
}

.color-888 {
	color: #888888;
}

.color-888 {
	color: #888888;
}

.unit-span {
	color: #888888;
	font-size: 24px;
	font-weight: 500;
	margin-right: 10rpx;
}

.unit-small-span {
	color: #888888;
	font-size: 11px;
	font-weight: 600;
	margin-right: 10rpx;
}

.color-000 {
	color: #000000;
}

.color-small-large-value {
	color: #000000;
	font-size: 18px;
	font-weight: 600;
}

.color-small-small-value {
	color: #000000;
	font-size: 11px;
	font-weight: 600;
}

.color-large-value {
	color: #02B7E6;
	font-size: 36px;
	font-weight: 600;
}

.color-large-small-value {
	color: #02B7E6;
	font-size: 20px;
	font-weight: 600;
}

.color-even-value {
	color: #FF9400;
	font-size: 36px;
	font-weight: 600;
}

.color-small-even-value {
	color: #FF9400;
	font-size: 20px;
	font-weight: 600;
}
.pd-14{
	padding: 14px;
}
.ml-10 {
	margin-left: 10px;
}

.mr-10 {
	margin-right: 10px;
}

.mt-10 {
	margin-top: 10px;
}

.mt-6 {
	margin-top: 6px;
}

.mt-12 {
	margin-top: 12px;
}

.ml-20 {
	margin-left: 20px;
}

.mr-20 {
	margin-right: 20px;
}

.mb-15 {
	margin-bottom: 15px;
}

.mb-20 {
	margin-bottom: 20px;
}
</style>
